<template>
  <div class="home-container">
    <!-- swipe 轮播图 -->
    <!-- <mt-swipe :auto="4000">
      <mt-swipe-item v-for="item in slides" :key="item.id">
        <img :src="item.img" alt="">
      </mt-swipe-item>
    </mt-swipe> -->

    <swiper :slides="slides"></swiper>

    <!-- 九宫格导航 -->
    <ul class="mui-table-view mui-grid-view mui-grid-9">
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
          <router-link to="/home/newslist"> 
          <img
            class="icon-menu"
            src="../../lib/images/menu1.png"
            alt=""
          >
          <div class="mui-media-body">新闻资讯</div>
          </router-link>
        </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/pohtolist">
          <img
            class="icon-menu"
            src="../../lib/images/menu2.png"
            alt=""
          >
          <div class="mui-media-body">图片分享</div>
        </router-link>
        </li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3">
        <router-link to="/home/goodslist">
          <img
            class="icon-menu"
            src="../../lib/images/menu3.png"
            alt=""
          >
          <div class="mui-media-body">商品购买</div>
        </router-link></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <img
            class="icon-menu"
            src="../../lib/images/menu4.png"
            alt=""
          >
          <div class="mui-media-body">留言反馈</div>
        </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <img
            class="icon-menu"
            src="../../lib/images/menu5.png"
            alt=""
          >
          <div class="mui-media-body">视频专区</div>
        </a></li>
      <li class="mui-table-view-cell mui-media mui-col-xs-4 mui-col-sm-3"><a href="#">
          <img
            class="icon-menu"
            src="../../lib/images/menu6.png"
            alt=""
          >
          <div class="mui-media-body">联系我们</div>
        </a></li>

    </ul>
  </div>
</template>
<script>
import Swiper from '../subcomponents/Swiper.vue'
export default {
  data(){
    return {
      slides:[]
    }
  },
  created(){
    this.getSlides();
  },
  methods:{
    getSlides(){
      this.$http.get('api/getlunbo').then((res)=>{
        console.log(res);
        if(res.body.status==0){
          this.slides=res.body.message;
        }
      });
    }
  },
  components:{
    swiper:Swiper
  }
};
</script>
<style lang="scss" scoped>
.home-container {
  margin-bottom: 40px;
  .mint-swipe {
    height: 200px;
    .mint-swipe-item {
      /*设置轮播图100%显示*/
      >img{
         width: 100%;
        height: 100%;
      }
      &:nth-child(1) {
        background: pink;
      }
      &:nth-of-type(2) {
        background: red;
      }
      &:nth-of-type(3) {
        background: green;
      }
    }
  }
  .mui-grid-view.mui-grid-9 {
    background-color: #fff;
  }
  .mui-grid-view.mui-grid-9 .mui-table-view-cell {
    border: 0;
  }
  .icon-menu {
    width: 60%;
    height: 60%;
  }
}
</style>


